<script>
import { useCounterStore } from '@/stores/counter';

import { Chart } from 'highcharts-vue'
import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'


exportingInit(Highcharts)

export default {
  name: "P2",
  components: {

    highcharts: Chart
  },
  data() {
    return {

      chartOptions1: {
        credits: {
          enabled: false
        },
        exporting: { enabled: false },
        title: {
          text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
        },
        subtitle: {
          text: '数据来源：thesolarfoundation.com'
        },
        yAxis: {
          title: {
            text: '就业人数'
          }
        },
        legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'middle'
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false
            },
            pointStart: 2010
          }
        },
        series: [{
          name: '安装，实施人员',
          data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        }, {
          name: '工人',
          data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        }, {
          name: '销售',
          data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        }, {
          name: '项目开发',
          data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        }, {
          name: '其他',
          data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }],
        responsive: {
          rules: [{
            condition: {
              maxWidth: 500
            },
            chartOptions: {
              legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
              }
            }
          }]
        }
      }
      //                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
      // 原文链接：https://blog.csdn.net/shykevin/article/details/117433856


    }
  },
  computed: {
    count() {
      return useCounterStore().count;
    },
  },
  methods: {
    handleBack() {
      this.$router.go(-1);
    }
  }
}
</script>

<template>

  <div style="height: 800px;width:100%;">
    <lay-page-header content="p2页面" @back="handleBack"></lay-page-header>



    <lay-panel>
      内容 
      <p>Count: {{ count }}</p>
      <p>p2</p>
      <lay-button type="normal" style="width: 200px">百搭按钮</lay-button>


      <highcharts :options="chartOptions1"></highcharts>

    </lay-panel>

    <lay-backtop :showHeight="200" :bottom="20" position="absolute"></lay-backtop>


  </div>





</template>

<style scoped></style>